const path = require('path');
const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const PORT = process.env.PORT || '65501';
const NODE_ENV = process.env.NODE_ENV;
const isProd = NODE_ENV !== 'development';

const resolve = function (dir) {
	return path.join(__dirname, '.', dir);
};

console.log('webpack打包环境：' + NODE_ENV);

module.exports = {
	mode: NODE_ENV,
	entry: './src/index.ts',
	output: {
		filename: 'vhm-utils.js',
		path: path.resolve(__dirname, 'dist'),
		library: {
			name: 'vhm-utils',
			type: 'umd'
		}
	},
	// webpack 能够为多种环境或 target 构建编译
	target: isProd ? 'browserslist' : 'web',
	// 此选项控制是否生成，以及如何生成 source map
	devtool: 'source-map',
	// 配置模块如何解析
	resolve: {
		extensions: ['.tsx', '.ts', '.js'],
		alias: {
			'/@': resolve('lib'),
			'/#': resolve('typings')
		}
	},
	// 本地开发
	devServer: {
		static: {
			publicPath: '/'
		},
		// 如果设置为 true，则仅处理和报告 errors，并忽略 warnings。
		// quiet: true,
		// 启用 Watch 模式。这意味着在初始构建之后，webpack 将继续监听任何已解析文件的更改。
		// watch: true,
		// 一组用来定制 watch 模式的选项
		// watchOptions: { poll: false },
		// 启用 webpack 的 热模块替换 特性：
		hot: true,
		// 告诉 dev-server 在服务器已经启动后打开浏览器
		open: true,
		// 指定要使用的 host。如果你想让你的服务器可以被外部访问
		host: '0.0.0.0',
		// 指定端口
		port: PORT,
		// 该选项允许将允许访问开发服务器的服务列入白名单。
		allowedHosts: 'auto',
		// 启用 gzip compression：
		compress: true,
		// 客户端设置
		client: {
			// 'log' | 'info' | 'warn' | 'error' | 'none' | 'verbose'
			logging: 'none',
			// 当出现编译错误或警告时，在浏览器中显示全屏覆盖。
			overlay: { errors: true, warnings: false },
			// 在浏览器中以百分比显示编译进度。
			progress: true,
			// 告诉 dev-server 它应该尝试重新连接客户端的次数。当为 true 时，它将无限次尝试重新连接。
			reconnect: true
		},
		historyApiFallback: {
			rewrites: [
				{
					from: /\/get\/*/,
					to: function (context) {
						console.log('get请求接口：' + context.parsedUrl.path);
						return context.parsedUrl.path;
					}
				}
			]
		}
	},
	// 模块
	module: {
		rules: [
			{
				test: /\.ts$/,
				use: ['babel-loader'],
				exclude: /node_modules/
			}
		]
	},
	// 插件
	plugins: [
		new CleanWebpackPlugin(),
		new HtmlWebpackPlugin({
			filename: 'index.html',
			template: './example/index.html',
			inject: true,
			hash: new Date().getTime(),
			env: NODE_ENV,
			minify: {
				removeComments: true,
				collapseWhitespace: true,
				removeAttributeQuotes: true
			},
			chunksSortMode: 'manual'
		}),
		new SimpleProgressWebpackPlugin({
			format: 'compact'
		})
	],
	// 优化
	optimization: {
		minimize: true,
		minimizer: [
			new TerserPlugin({
				extractComments: false //不将注释提取到单独的文件中
			})
		]
	},
	// 排除打包第三方包
	externals: {
		// lodash: 'lodash'
	}
};
